<section class="demo-scroll-container">
  <div class="top-group">
    <d-button dPopover bsStyle="common" [content]="'top-left'" [position]="'top-left'" [controlled]="true" [width]="'100px'">
      top-left
    </d-button>
    <d-button dPopover bsStyle="common" [content]="'top'" [position]="'top'" [controlled]="true" [width]="'100px'"> top </d-button>
    <d-button dPopover bsStyle="common" [content]="'top-right'" [position]="'top-right'" [controlled]="true" [width]="'100px'">
      top-right
    </d-button>
  </div>
  <div class="left-group">
    <d-button
      dPopover
      bsStyle="common"
      [content]="'<p>left-top</p><p>left-top</p>'"
      [position]="'left-top'"
      [controlled]="true"
      [width]="'100px'"
    >
      left-top
    </d-button>
    <d-button dPopover bsStyle="common" [content]="'left'" [position]="'left'" [controlled]="true" [width]="'100px'"> left </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [content]="'<p>left-bottom</p><p>left-bottom</p>'"
      [position]="'left-bottom'"
      [controlled]="true"
      [width]="'100px'"
    >
      left-bottom
    </d-button>
  </div>
  <div class="right-group">
    <d-button
      dPopover
      bsStyle="common"
      [content]="'<p>right-top</p><p>right-top</p>'"
      [position]="'right-top'"
      [controlled]="true"
      [width]="'100px'"
    >
      right-top
    </d-button>
    <d-button dPopover bsStyle="common" [content]="'right'" [position]="'right'" [controlled]="true" [width]="'100px'"> right </d-button>
    <d-button
      dPopover
      bsStyle="common"
      [content]="'<p>right-bottom</p><p>right-bottom</p>'"
      [position]="'right-bottom'"
      [controlled]="true"
      [width]="'100px'"
    >
      right-bottom
    </d-button>
  </div>
  <div class="bottom-group">
    <d-button dPopover bsStyle="common" [content]="'bottom-left'" [position]="'bottom-left'" [controlled]="true" [width]="'100px'">
      bottom-left
    </d-button>
    <d-button dPopover bsStyle="common" [content]="'bottom'" [position]="'bottom'" [controlled]="true" [width]="'100px'"> bottom </d-button>
    <d-button dPopover bsStyle="common" [content]="'bottom-right'" [position]="'bottom-right'" [controlled]="true" [width]="'100px'">
      bottom-right
    </d-button>
  </div>
</section>
